<template>
  <el-card>
    <div>
      <div style="color: #777; font-size: 14px">明星藏品被浏览次数</div>
      <div ref="chart" style="height: 500px; width: 100%"></div>
    </div>
  </el-card>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getstartcol } from '@/api/collect'
import * as echarts from 'echarts'
const chart = ref(null)
const resdata = ref()
onMounted(async () => {
  const res = await getstartcol()
  console.log(res)
  resdata.value = res.data.colList
  initChart()
})

const initChart = () => {
  const mychart = echarts.init(chart.value)
  mychart.setOption({
    title: {
      text: ''
    },
    tooltip: {},
    xAxis: {
      name: '藏品名字',
      data: resdata.value.map((item) => item.title)
    },
    yAxis: {},
    series: [
      {
        name: '浏览量',
        type: 'bar',
        data: resdata.value.map((item) => item.view),
        itemStyle: {
          normal: {
            color: function () {
              return '#' + Math.floor(Math.random() * (256 * 256 * 256 - 1)).toString(16)
            }
          }
        }
      }
    ]
  })
}
</script>

<style></style>
